<!--  -->
<template>
  <div>
    <el-dialog
      title="责任原因编码选择"
      :visible.sync="show"
      width="880px"
      top="2vh"
      class="bmDialogClass"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <div class="tt-container">
        <div class="tt-left-tree" v-if="show">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            :default-expanded-keys="[this.label]"
            node-key="label"
            ref="treeBox"
            class="elTree"
            @node-click="handleNodeClick"
            lazy
            :load="loadNode"
          ></el-tree>
        </div>
        <div class="tt-right-table">
            <div>
            &nbsp;&nbsp;编码：
            <el-input
              class="input-item"
              placeholder
              v-model="listQuery.tdzrmSearch"
              size="mini"
              oninput="if(value.length>10)value=value.slice(0,10)"
              placeholder="请输入责任码"
              clearable
            ></el-input>
            &nbsp;&nbsp;名称：
            <el-input
              class="input-item"
              placeholder
              v-model="listQuery.tdzryySearch"
              size="mini"
              placeholder="请输入责任名称"
              clearable
            ></el-input>
            <el-button
              @click="findZryy"
              size="mini"
              type="primary"
              icon="el-icon-search"
              >查询</el-button
            >
          </div>
          <el-table
            stripe
            :header-cell-style="headerStyle"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            :data="tableList"
            ref="zryyTable"
            height="380px"
            style="width: 100%"
            highlight-current-row
            v-loading="listLoading"
            @row-click="selectTable"
            @row-dblclick="tableClikHandle"
          >
            <el-table-column
              label="序号"
              align="center"
              fixed="left"
              type="index"
              width="50"
            />
            <el-table-column
              prop="fl"
              label="分类编码"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="tdzrm"
              label="停电责任码"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="tdzryy"
              label="责任原因"
            ></el-table-column>
          </el-table>

          <el-pagination
            class="pagination-container"
            :pager-count="5"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.current"
            :page-size="listQuery.size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="confirm" type="primary" size="medium"
          >确 定</el-button
        >
        <el-button @click="handleClose" size="medium">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 
      使用规则：import GetZryybm from "../../../dialogCommom/GetZryybm";
              <GetZryybm ref="getZryybmRef" @handleGetZryy="handleGetZryy"></GetZryybm>
              handleGetZryy  数据回传方法
     -->
  </div>
</template>

<script>
// 使用规则 
import { getZryybmTree, getZryybmTable } from "../api/dmgl/zryy";
export default {
  data() {
    return {
      show: false,
      treeData: [],
      defaultProps: {
        label: "label",
        children: "child",
        isLeaf: "leaf",
      },
      label: "",
      listLoading: false,
      headerStyle: {
        'color': '#858585',
        'font-weight': '400',
        'background-color': '#fcfcfc',
      },
      rowStyle: { height: '25px' },
      cellStyle: { padding: '0px' },
      tableList: [],
      listQuery: {
        current: 1,
        size: 10,
        tdzrmSearch: "",
        tdzryySearch: ""
      },
      flLike: "",
      total: 0,
      callBackData: {}
    };
  },

  components: {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  beforeUpdate() {
    //解决列配置引发的滚动条问题
  },

  update() {},

  destroyed() {},

  methods: {
    /**点击树节点 */
    handleNodeClick(data, node) {
      this.flLike = data.id;
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.listQuery.tdzrmSearch = "";
      this.listQuery.tdzryySearch = "";
      this.getTableList();
    },
    /**单击表格 */
    selectTable(row) {
      this.callBackData = row;
    },
    /**双击表格 */
    tableClikHandle(row) {
      this.callBackData = row;
      this.$emit("handleGetZryy", this.callBackData);
      this.clearData();
      this.show = false;
    },
    /**确定 */
    confirm() {
      this.$emit("handleGetZryy", this.callBackData)
      this.clearData();
      this.show = false;
    },
    /**查询 */
    findZryy() {
      this.flLike = "";
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.getTableList();
    },
    /**获取表格数据 */
    async getTableList() {
      this.listLoading = true;
      let fllike = this.flLike == "0" ? "" : this.flLike;
      let reqData = {
        current: this.listQuery.current,
        size: this.listQuery.size,
        tdzrmSearch: this.listQuery.tdzrmSearch,
        tdzryySearch: this.listQuery.tdzryySearch,
        flLike: fllike,
        ascs: ["fl"]
      };
      let res = await getZryybmTable(reqData);
      if (res.code === 0) {
        this.listLoading = false;
        this.tableList = res.data.records;
        this.total = res.data.total;
      }
    },
    /**分页 */
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getTableList();
    },
    /**分页 */
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.listQuery.current = 1;
      this.getTableList();
    },

    /**清除一些参数 */
    clearData(){
      this.tableList = [];
      this.flLike = "";
      this.listQuery.current = 1;
      this.listQuery.size = 10;
      this.listQuery.tdzrmSearch = "";
      this.listQuery.tdzryySearch = "";
      this.callBackData = "";
    },

    /**树懒加载 */
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.getZryybmTreeOne(resolve);
      }else if(node.level >= 1){
        this.getZryybmTree(node, resolve)
      }
    },
    /**获取一级节点数据 */
    getZryybmTreeOne(resolve){
      
      let res = [
        {
          id: "0",
          label: "责任原因",
          icon: null,
          children: null,
          data: {
            id: "",
            fl: "",
            tdzrm: null,
            tdzryy: "",
            zrqc: "",
            tjbzm: null,
            bzm: null
          }
        }
      ]
      this.label = res[0].label
      this.treeData = res;
      return resolve(res);
    },
    /**获取树 */
    async getZryybmTree(node, resolve) {
      let reqData = {
        fl: node.data.id == '0'? "" : "",
        root: "1",
      };
      let res = await getZryybmTree(reqData);
      if(res.code === 0){
        let req = res.data
        // for (let i = 0; i < req.length; i++) {
        //     if (req[i].data.dwjb > 3) {
        //       req[i].name = "leaf";
        //       req[i].leaf = true;
        //     }
        //   }
        return resolve(res.data);
      }else{
        this.$message.error(res.message)
      }
     
    },

    /**打开弹窗 */
    openZryybm() {
      this.show = true;
      this.getTableList();
      this.$nextTick(() => {
        this.$refs.zryyTable.doLayout();
      })
    },
    
    /**关闭弹窗 */
    handleClose() {
      this.clearData();
      this.show = false;
    },
  },
};
</script>
<style lang='scss'>
.elTree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
.bmDialogClass .el-dialog__body {
  padding: 3px 10px;
}
.el-dialog__footer {
  padding: 5px 10px 5px;
}



</style>
<style lang="scss" scoped>
  .tt-container {
  width: 100%;
  height: 450px;
  overflow: hidden;
  .tt-left-tree {
    width: 250px;
    height: 100%;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    float: left;
    overflow: auto;
  }
  .tt-right-table {
    width: calc(100% - 260px);
    height: 100%;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    float: left;
  }
}
</style>